<template>
    <div class="directiveStudy" v-waterMarker="{text: 'xiao xi liu'}">
      <h4>什么时候需要自定义指令？ 需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 需要将某些功能在指定DOM元素上使用</h4>

      <div class= "drag_box">
        <div v-draggable class="canMoveBox">实现v-draggable可拖拽</div>

      </div>
        <div class="focus_box">
          <input v-focus/><span>v-focus自定义指令</span>
        </div>
        <div class="copy_box">
          <el-input v-model="strName"></el-input>
          <el-button v-copy="strName">v-copy复制的自定义指令</el-button>
        </div>
        <div>
          <h4>el, binding, vnode, prevVnode</h4>
          <h4>created,beforeMount,mounted,beforeUpdate,updated,beforeUnmount,unmounted</h4>
        </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import {ref,onMounted} from 'vue'
let strName = ref('111')
onMounted(()=>{
  console.log('onMounted')
})
  </script>
  <style scoped lange="scss">
  .drag_box{
    position: relative;
    height: 200px;
    /* background: pink; */
  }
  .canMoveBox{
    display: flex;
  align-items: center;
  justify-content: center;
    width: 50px;
    height: 50px;
    /* background: red; */
    position: absolute;
    font-size: 23px;
    font-weight: bold;
    top: 110px;
  }
  .focus_box{
    /* background: green; */
  }
  .copy_box{
    /* background: blue; */
  }
</style>
  
  